<template>
  <div class="scheme-banner-advantage">
    <div class="container">
      <Title
        v-slide-up
        title="方案优势"
        color="#0e0b31"
        size="16"
        bold="700"
        sub-title="Program Advantages"
        sub-color="#878597"
        sub-size="14"
        left="27"
        block="#4580dd"
        block-width="2"
        block-pos="center"
      />
      <div class="g-box g g2 gap23">
        <div v-slide-plus v-for="(i, k) in data.list" :key="k" class="g-item f f-ac">
          <img :src="publicSrc(i.image)" />
          <Title
            :title="i.name"
            color="#0e0b31"
            size="14"
            bold="700"
            line="1"
            :sub-title="i.introduce"
            sub-color="#383838"
            sub-size="14"
            gap="10"
            :line-height="20"
            sub-line="2"
            left="0"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { publicSrc } from "@/utils/common";
defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        list: [],
      };
    },
  },
});
</script>
<style lang="scss" scoped>
.scheme-banner-advantage {
  width: 100%;
  background-color: #fff;
  position: relative;
  .container {
    padding: 30px 0;
    .g-box {
      margin-top: 20px;
      .g-item {
        height: 110px;
        background: #fff;
        border: 1px solid #e5e5e5;
        padding: 0 20px 0 35px;
        transition: all 0.3s;
        img {
          width: 38px;
          height: 38px;
          margin: 20px 35px 20px 0;
        }
        &:hover {
          background: linear-gradient(135deg, #fff 0%, #2a82e4 100%);
          box-shadow: 0px 10px 15px rgba(42, 130, 228, 0.25);
          animation: toRight 0.3s ease;
        }
      }
    }
  }
}
</style>
